<script>
import axios from "axios";
export default {
    data() {
        return {
            bookname: "", //关联书名输入框
            prices: 0,    //关联书的价格
            names: [],    //关联列表中总数据      
            selected: "", //关联列表中的被选中项
            bookids: [],  //存储与`names`对应的id
        };
    },
    methods: {
        getBook() {
            let that = this; //存储全局this
            axios({
                method: "get",
                url: "/books/",
                params: {
                    bookname: that.bookname,
                },
            }).then(function (res) {//根据返回值存储相关数据        
                that.names = [];
                that.bookids = [];
                for (var i = 0; i < res.data.length; i++) {
                    that.names.push(`${res.data[i].bookname},${res.data[i].prices}`);
                    that.bookids.push(res.data[i].id);
                }
            })
            return null;
        },
        hasValidInput() {//校验输入数据
            if (this.prices === 0 || this.bookname.trim() === "") {
                return false;
            } else {
                return true;
            }
        },
        addBook() {
            if (this.hasValidInput()) {
                const bookinfo = `${this.bookname},${this.prices}`;
                let that = this;
                if (!that.names.includes(bookinfo)) {
                    axios({
                        method: "POST",
                        url: "/books/",
                        data: {
                            bookname: this.bookname,
                            prices: this.prices,
                        },
                    }).then(function (res) {
                        that.names.push(bookinfo);
                        that.bookids.push(res.data.id);
                    });
                    that.bookname = "";
                    that.prices = 0;
                }
            }
            return null;
        },
        deleteBook() {
            if (this.selected) {
                const i = this.names.indexOf(this.selected);
                let that = this; //存储全局this
                axios({
                    method: "POST",
                    url: `/deleteBook/${that.bookids[i]}`,
                    data: {
                        bookid: that.bookids[i],
                    },
                }).then(function (res) {
                    console.log(res.data);
                    that.names.splice(i, 1);
                    that.bookids.splice(i, 1);
                });
                that.selected = "";
                that.bookname = "";
                that.prices = 0;
            }
        },
        updateBook() {
            if (this.hasValidInput() && this.selected) {
                const bookinfo = `${this.bookname},${this.prices}`;
                const i = this.names.indexOf(this.selected);

                let that = this; //存储全局this
                if (!that.names.includes(bookinfo)) {
                    axios({
                        method: "POST",
                        url: `/updateBook/`,
                        data: {
                            id: that.bookids[i],
                            bookname: that.bookname,
                            prices: that.prices,
                        },
                    }).then(function (res) {
                        that.names[i] = bookinfo;
                        that.selected = bookinfo;
                        that.bookname = "";
                        that.prices = 0;
                    });
                }
            }
        },
    },
}
</script>



<template>
    <label>书名：</label><input v-model="bookname" />
    <label>价格：</label><input v-model="prices" />
    <hr />
    <div>
        <p>书籍列表：</p>
        <select size="5" v-model="selected">
            <option v-for="name in names" :key="name">{{ name }}</option>
        </select>
    </div>

    <div>
        <button @click="addBook">增加</button>
        <button @click="updateBook">修改</button>
        <button @click="deleteBook">删除</button>
        <button @click="getBook">查询</button>
    </div>
</template>

  